<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>校园失物招领平台 - 管理后台</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" rel="stylesheet">
    <style>
        body {
            overflow-x: hidden;
        }
        #sidebar {
            min-height: 100vh;
            box-shadow: 2px 0 5px rgba(0,0,0,0.1);
            position: fixed;
            left: 0;
            top: 0;
            z-index: 1000;
        }
        .main-content {
            margin-left: 0;
            transition: margin-left 0.3s;
            position: relative;
            z-index: 1;
        }
        @media (min-width: 768px) {
            .main-content {
                margin-left: 25%;
            }
        }
        @media (min-width: 992px) {
            .main-content {
                margin-left: 16.666667%;
            }
        }
        .stat-card {
            background: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        .stat-card .icon {
            font-size: 2rem;
            color: #667eea;
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <!-- 侧边导航栏 -->
            <div th:replace="fragments/sidebar :: sidebar"></div>

            <!-- 主内容区域 -->
            <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4 main-content">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2>仪表盘</h2>
            <span class="text-muted">欢迎回来，管理员</span>
        </div>
        
        <!-- 统计卡片 -->
        <div class="row">
            <div class="col-md-6">
                <div class="stat-card">
                    <div class="d-flex align-items-center">
                        <div class="icon me-3">
                            <i class="bi bi-search"></i>
                        </div>
                        <div>
                            <h3 class="mb-0" th:text="${lostItemCount}">0</h3>
                            <small class="text-muted">失物招领</small>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="stat-card">
                    <div class="d-flex align-items-center">
                        <div class="icon me-3">
                            <i class="bi bi-check-circle"></i>
                        </div>
                        <div>
                            <h3 class="mb-0" th:text="${claimRecordCount}">0</h3>
                            <small class="text-muted">认领记录</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 快速操作 -->
        <div class="row mt-4">
            <div class="col-12">
                <div class="stat-card">
                    <h5>快速操作</h5>
                    <div class="row">
                        <div class="col-md-4">
                            <a th:href="@{/lost-item/add}" class="btn btn-primary w-100 mb-2">
                                <i class="bi bi-plus-circle me-2"></i>新增失物
                            </a>
                        </div>
                        <div class="col-md-4">
                            <a th:href="@{/claim-record/list}" class="btn btn-success w-100 mb-2">
                                <i class="bi bi-list-check me-2"></i>认领记录
                            </a>
                        </div>
                        <div class="col-md-4">
                            <a th:href="@{/stats/dashboard}" class="btn btn-info w-100 mb-2">
                                <i class="bi bi-bar-chart me-2"></i>查看统计
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
    </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>